<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
>
    <el-table-column prop="id" label="ID" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="amount1" label="数值 1"> </el-table-column>
    <el-table-column prop="amount2" label="数值 2"> </el-table-column>
    <el-table-column prop="amount3" label="数值 3"> </el-table-column>
</el-table>

<script>
    export default {
        name: "ProjectLoanInfoQuery",
        components: {
        },
        data() {
            return {
                tableData: [
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "234",
                        amount2: "3.2",
                        amount3: 10,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "165",
                        amount2: "4.43",
                        amount3: 12,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "324",
                        amount2: "1.9",
                        amount3: 9,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "621",
                        amount2: "2.2",
                        amount3: 17,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "539",
                        amount2: "4.1",
                        amount3: 15,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "234",
                        amount2: "3.2",
                        amount3: 10,
                    },
                    {
                        id: "合计1",
                        name: "",
                        amount1: "121212",
                        amount2: "121212",
                        amount3: "121212",
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "324",
                        amount2: "1.9",
                        amount3: 9,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "621",
                        amount2: "2.2",
                        amount3: 17,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "539",
                        amount2: "4.1",
                        amount3: 15,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "539",
                        amount2: "4.1",
                        amount3: 15,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "539",
                        amount2: "4.1",
                        amount3: 15,
                    },
                    {
                        id: "12987122",
                        name: "王小虎",
                        amount1: "539",
                        amount2: "4.1",
                        amount3: 15,
                    },
                    {
                        id: "合计2",
                        name: "",
                        amount1: "121212",
                        amount2: "121212",
                        amount3: "121212",
                    },
                ],
                colArr1: [6, 0, 0, 0, 0, 0, 1, 6, 0, 0, 0, 0, 0, 1],
                // 合拼数组,1表示不合拼，0表示该行被合并，colArr1的长度就是后台返回的数组长度

                // table
                sumBalanceList: [
                    {
                        curName: "人民币",
                        curcd: "CNY",
                        sumBalance: 1933333333,
                        sumBalanceCanUse: 1932333333,
                        sumBalanceCanUseRmb: 1932333333,
                        sumBalanceRmb: 1933333333,
                        sumBalanceUsed: 1000000,
                        sumBalanceUsedRmb: 1000000,
                    },
                    {
                        curName: "美元",
                        curcd: "USD",
                        sumBalance: 1542289,
                        sumBalanceCanUse: 1542289,
                        sumBalanceCanUseRmb: 1542289,
                        sumBalanceRmb: 1542289,
                        sumBalanceUsed: 2222222,
                        sumBalanceUsedRmb: 2222222,
                    },
                ],
            };
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                //合拼第一二列的行
                if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
                    const _row = this.colArr1[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    console.log("_row", _row, "_col", _col);
                    //返回行和列的合拼数
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
                }
            },
        },
    };
</script>



</body>
</html>